<template>
    <div>
        <group>
            <selector title="选择品牌" :options="companies" @on-change="fetchTotal" v-model="order.company_id"></selector>
            <selector title="选择材质" :options="material" @on-change="setMaterial" v-model="order.material_id"></selector>
            <cell title="省市区" @click.native="showArea" is-link>{{order.province}}{{order.city}}{{order.area}}</cell>
            <x-input title="街道地址" v-model="order.street" placeholder="详细的地址"></x-input>
            <x-input title="面积(m²)" type="tel" is-type="number" v-model="order.square" @on-change="fetchTotal" placeholder="门窗的面积(m²)"></x-input>
            <x-input title="联系人" v-model="order.name" placeholder="客户的姓名"></x-input>
            <x-input title="手机" type="tel" v-model="order.tel" placeholder="客户的手机"></x-input>
            <datetime title="上门时间" v-model="order.booking_date" format="YYYY-MM-DD HH:mm" confirm-text="确认" cancel-text="取消" :minute-list="['00', '15', '30', '45']"></datetime>
            <x-switch title="是否安装单" v-model="order.mount_order"></x-switch>
        </group>
        <group>
            <x-button type="primary" @click.native="pushOrder">确认发布</x-button>
        </group>
        <vue-area :props-show="show" :props-result="result" v-on:result="areaResult"></vue-area>
    </div>
</template>
<script>
    import {XInput, XSwitch, Selector, Group, XButton, Cell, Datetime} from 'vux'
import vueArea from 'vue-area'

export default {
    components: {
        XInput,
        Group,
        XButton,
            Cell,
            Datetime,
            Selector,
            vueArea,
            XSwitch
    },
    data(){
        return {
            result: null,
            show: false,
            order: {
                square: 0,
                province: null,
                city: null,
                area: null,
                street: null,
                material: null,
                material_id: null,
                company_id: null,
                booking_date: "",
                remark: null,
                name: null,
                    tel: null,
                    total: 0,
                    mount_order: false
            },
            companies:[],
            material: [],
        }
    },
    created(){
        this.$store.commit("storeState", false)
        this.fetch_source()
    },
    methods: {
        showArea() {
            this.show = true
        },
            areaResult(show, result){
                this.show = show
                if (result) {
                    this.order.province = result.province.name
                    this.order.city = result.city.name
                    this.order.area = result.area.name
                }
            },
            fetch_source(){
            this.$http.get("fetch_source.json").then(res => {
                let data = res.data
                this.companies = data.company.map((o) => {
                    let oj = {}
                    oj["key"] = o.id
                    oj["value"] = o.abbr + "--" + o.name
                    return oj
                })
                this.material = data.material.map((o) => {
                    let oj = {}
                    oj["key"] = o.id
                    oj["value"] = o.name
                    return oj
                })
            })
            },
            setMaterial(val){
                let temp = searchValue(val, this.material)
                this.order.material = temp
                this.fetchTotal()
            },
            fetchTotal(val){
                if (this.order.material && this.order.square && this.order.company_id) {
                    this.$http.post("orders/cal_price.json", {material: this.order.material, square: this.order.square, company_id: this.order.company_id}).then(res => {
                        let data = res.data
                        this.order.total = data.price
                    })
                } else {
                    this.order.total = 0
                } 
            },
            pushOrder() {
            let order = this.order
            order.booking_date = new Date(this.order.booking_date).valueOf() / 1000
                this.$http.post("orders/appoint.json", order).then(res => {
                    let data = res.data;
                    if (data.code == 200) {
                        this.$router.push({path: "/main", query: {type: "all"}})
                    } else {
                        this.$vux.alert.show({
                            title: "发布失败",
                            content: data.msg
                        })
                    }
                })
            }
    }
}
function searchValue(key, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].key === key) {
            return myArray[i].value;
        }
    }
}

</script>
<style>
    .ProvCityHeader .ProvCityHeaderConfirm, .ProvCityHeader .ProvCityHeaderCancle {
        color: #000;
    }
</style>
